<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="/Trees/LayUiBac/layui/css/layui.css" media="all">
</head>

<body>
<div class="layui-container">
    <div class="layui-row" style="margin-left: 360px;margin-top: 150px">
        <div class="layui-form-item">
            <img src="../LayUiBac/img/rabit.jpg" style="width: 200px;height: 200px;margin-left: 100px">
        </div>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" id="username" required lay-verify="required"
                           placeholder="请输入你的用户名"
                           autocomplete="off" class="layui-input" width="300px">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" id="password" required lay-verify="required"
                           placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn" id="login" style="margin-left: 110px">登录</button>
            <a href="/Trees/LayUiBac/register.html">
                <button type="button" class="layui-btn layui-bg-red" id="register" style="margin-left: 57px">注册</button>
            </a>
        </form>
    </div>
</div>

<script src="/Trees/LayUiBac/layui/layui.js"></script>
<script>
    //Demo
    layui.use('form', function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;

        $('#login').on('click', function () {
            let password = $('#password').val();
            let username = $('#username').val();
            let str = "&password=" + password + "&username=" + username
            $.ajax({
                type: 'post'
                , url: '/Trees/login?method=userLogin' + str
                , success: function (data) {
                    console.log(data)
                    alert(data);
                    if (data === '"Hello"') {
                        window.location.href = "/Trees/LayUiBac/index.html";
                    }
                }
            })
        })


        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>